<template>
    <div>
        <div class="shop-content">
    <div class="shopping">
        <div class="shop-group-item">
            <div class="shop-name">
                <i class="icon"></i>
                <h4><a href="#">飞腾时代数码专营店> </a></h4>
            </div>
            <ul>
                <li>
                    <div class="shop-info">
                        <div class="shop-info-img"><a href="#"><img src="../../../assets/business/images/shop-pic1.png" /></a></div>
                        <div class="shop-info-text">
                            <h4>无线蓝牙键盘iPad平板电脑安卓苹果手机迷你便捷通用Mac办公</h4>
                            <div class="canshu">银白色，可充电蓝牙板</div>
                            <div class="shop-price">
                                <div class="shop-pices">￥<b class="price">100.00</b><span class="yuanjia">原价 ￥168</span></div>
                                <div class="shop-arithmetic">
                                    <a href="javascript:;" class="minus">-</a>
                                    <span class="num" >1</span>
                                    <a href="javascript:;" class="plus">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="shop-info">
                        <div class="shop-info-img"><a href="#"><img src="../../../assets/business/images/shop-pic1.png" /></a></div>
                        <div class="shop-info-text">
                            <h4>无线蓝牙键盘iPad平板电脑安卓苹果手机迷你便捷通用Mac办公</h4>
                            <div class="canshu">银白色，可充电蓝牙板</div>
                            <div class="shop-price">
                                <div class="shop-pices">￥<b class="price">100.00</b><span class="yuanjia">原价 ￥168</span></div>
                                <div class="shop-arithmetic">
                                    <a href="javascript:;" class="minus">-</a>
                                    <span class="num" >1</span>
                                    <a href="javascript:;" class="plus">+</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="shopPrice">本店总计：￥<span class="shop-total-amount ShopTotal">0.00</span></div>
        </div>
        <div class="shop-discount">
            <div class="left">店铺优惠</div>
            <div class="right">
                省10元 <i class="icon"></i>
            </div>
        </div>
        <div class="liuyan-info">
            <span class="left">卖家留言</span>
            <input type="text" class="text">
        </div>
        <div class="commodity-statistics">
            共1件商品 &nbsp;&nbsp;小计：<span>￥200</span>
        </div>
    </div>
    <div class="payment-bar">
        <div class="shop-total">
            <strong>合计：<i class="total" id="AllTotal">200.00</i></strong>
        </div>
        <a href="pay.html" class="settlement">结算 (2)</a>
    </div>
</div>
<div class="discount-hide">
    <div class="top-info">
        <h4 class="title">店铺优惠</h4>
        <i class="slide-close"></i>
    </div>
    <ul class="list-ul">
        <li class="list-li">
            <span class="left-text">省10元：618狂欢大促</span>
            <i class="icon active"></i>
        </li>
        <li class="list-li">
            <span class="left-text">省5元：618狂欢</span>
            <i class="icon"></i>
        </li>
        <li class="list-li">
            <span class="left-text">不使用优惠</span>
            <i class="icon"></i>
        </li>
    </ul>
</div>
    </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/settlement.css";
  @import "../../../assets/personal/css/detailed_list1.css";
  .clearfix{
    clear: both;
  }
</style>
<script> 
export default {
    mounted(){
        $(function () {
    $(".shop-discount .right").click(function () {
        $(".discount-hide").slideDown(200);
        $(".hide-mc").show();
    });
    $(".slide-close").click(function () {
        $(".discount-hide").slideUp(200);
        $(".hide-mc").hide();
    });
    $(".discount-hide .list-ul .list-li .icon").click(function () {
        $(this).addClass("active").parent().siblings().find(".icon").removeClass("active");
    })
})
    }
}
</script>
